<template>
  <div class="mid_area">
    <div class="tab_holder">
      <div class="tab_item" v-for="(item, index) in itemInfo" :class="{ selected: selectedTab == index }"
        @click="tabClick(index)">
        {{ item.tab }}
      </div>
    </div>
    <div class="banner_holder">
      <div class="bar_item" v-for="(item, index) in itemInfo" :style="{
        background: `linear-gradient(99deg,${item.backgroundColor[0]} 8.29%,${item.backgroundColor[1]} 99.02%)`
      }">
        <div style="margin-left: 20px;margin-top: 20px; cursor: pointer; color:gold" @click="routerTo">click me to tools </div>
      </div>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import Buy from './Buy.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { toHeight, reHeight, toFoldHeight, foldHeight, foldSideHeight, initUI, scrollToBar } from '@/config/t2sUI'
import { useRouter, useRoute } from 'vue-router'

const toHei = toHeight
const reHei = reHeight
const toFoldHei = toFoldHeight
const foldHei = foldHeight
const foldSHei = foldSideHeight

const router = useRouter()
const routerTo = () => {
  router.push('/tools')
}

const itemInfo =  [
      {
        tab: 'tools',
        backgroundColor: ['#F8F2FF', ' #B897FF'],
        title: 'AI Text to Speech for YouTube/Tiktok',
        btnText: 'Buy Now',
        control: {
          btnSize: { pc: 56, mob: ['8.2%', '11.85%'] },
          btnPosition: { pc: [214, 542], mob: ['51.15%', '22.09%'] },
          bgColor: 'white',
          iconColor: '#6B57FF',
          playingSize: 34,
        },
      },
      {
        tab: 'tools',
        backgroundColor: ['#FFFCF3', '#FFE695 '],
        title: 'AI Text to Speech Book Reader',
        
        btnText: 'Buy Now',
        control: {
          btnSize: { pc: 56, mob: ['8.2%', '11.85%'] } as any,
          btnPosition: { pc: [325, 422], mob: ['75.3%', '36.75%'] },
          bgColor: '#FFBB00',
          iconColor: 'white',
          playingSize: 32,
        },
      },
      {
        tab: 'tools',
        backgroundColor: ['#FCF9FF', '#F2E1FF'],
        title: 'AI Text to Podcast',
       
        btnText: 'Buy Now',
        control: {
          btnSize: { pc: 56, mob: ['8.2%', '11.85%'] },
          btnPosition: { pc: [308, 575], mob: ['71.4%', '13.9%'] },
          bgColor: 'rgba(255,255,255,0.29)',
          iconColor: 'white',
          playingSize: 38,
        },
      },
      {
        tab: 'tools',
        backgroundColor: ['rgba(255, 246, 232, 1)', ' #FFCF87'],
        title: 'AI Create Audio Educational Content',
       
        btnText: 'Buy Now',
        control: {
          btnSize: { pc: 109.5, mob: ['19.49%', '28.1%'] },
          btnPosition: { pc: [156.6, 337.6], mob: ['45.225%', '44.86%'] },
          bgColor: 'rgba(255,255,255,0.2)',
          iconColor: '#6B57FF',
          playingSize: 68,
          border: '2px solid white',
        },
      },
      {
        tab: 'tools',
        backgroundColor: ['#F6FBFF ', '#B7E1FF'],
        title: 'Text To Speech For Enterprise/Marketing',
        
        btnText: 'Buy Now',
        control: {
          btnSize: { pc: 56, mob: ['8.2%', '11.85%'] },
          btnPosition: { pc: [350, 309], mob: ['80.3%', '53.65%'] },
          bgColor: '#6B57FF',
          iconColor: 'white',
          playingSize: 34,
        },
      },
    ]

onMounted(() => {
  initUI({ selectedTab })
})
onUnmounted(() => {
  window.onscroll = null
})



const selectedTab = ref(0)
const tabClick = (index: any) => {
  // selectedTab.value = index
  scrollToBar(index)
}

const showBuy = ref(false)
const buyItem = ref()

const closeBuy = () => {
  buyItem.value = null
  showBuy.value = false
}

</script>
<style scoped lang="scss">
.mid_area {
  // margin: 0 53px;
  // background-color: sandybrown;
  display: flex;
  flex-direction: column;
  align-items: center;

  .tab_holder {
    display: flex;
    margin-bottom: 32px;
    position: sticky;
    top: 20px;
    top: min(calc(100vh - v-bind("reHei(3)")), v-bind("toHei(2)"));

    .tab_item {
      min-width: 184px;
      padding: 8px 24px;
      border-radius: 999px;
      border: 1px solid transparent;
      color: rgba(0, 0, 0, 0.70);
      text-align: center;
      font-family: Poppins;
      font-size: 14px;
      font-weight: 600;
      line-height: 150%;
      cursor: pointer;
      border: 1px solid #0000;
      transition: all .1s;
    }

    @media screen and (max-width: 980px) {
      .tab_item {
        min-width: unset;
        padding: 8px 20px;
      }
    }

    .selected {
      border: 1px solid #000;
      color: rgba(0, 0, 0, 1);
    }
  }

  .banner_holder {
    padding: 0 53px;
    width: min(1520px, 100%);
    // background-color: yellowgreen;
    overflow: visible;

    .bar_item {
      border-radius: 32px;
      display: flex;
      width: 100%;
      height: 471px;
      margin-bottom: max(calc(100vh - v-bind("toHei(4)")), v-bind("foldSHei(4)"));
      transform-origin: 50% 0;

      .left {
        padding: 68px 0 68px 80px;
        width: 676px;
        height: 100%;
        position: relative;
        transform: all .1s;

        .title {

          color: #000;
          font-family: Poppins;
          font-size: 32px;
          font-weight: 700;
          line-height: 120%;
        }

        .textList {
          color: var(--07, rgba(0, 0, 0, 0.70));
          font-family: Poppins;
          font-size: 16px;
          font-weight: 400;
          line-height: 150%;

          ul {
            padding-left: 28px;

            li {
              margin-top: 16px;
            }
          }
        }

        .btn {
          position: absolute;
          left: 80px;
          bottom: 68px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 0 24px;
          border-radius: 88px;
          background: #6B57FF;
          cursor: pointer;
          height: 64px;
          min-width: 180px;

          &:hover {
            background: #5B44FF;
          }

          .btn_text {

            color: var(--White, #FFF);
            font-family: Poppins;
            font-size: 16px;
            font-weight: 700;
            line-height: 150%;
            /* 24px */
            text-transform: uppercase;
          }

          .btn_icon {
            width: 24px;
            height: 24px;
          }
        }

      }

      .right {
        flex: 1;
        height: 100%;
        position: relative;
        transform-origin: right center;

        .bg_pic {
          position: absolute;
          top: 3px;
          right: 24px;
          cursor: pointer;
        }

        .control_circle {
          position: absolute;
          border-radius: 999px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          pointer-events: none;
        }
      }

      @media screen and (max-width: 1440px) {
        .left {
          padding-left: 38px;
          width: 600px;
        }

        .right {
          // transform: scale(0.9);
        }
      }

      @media screen and (max-width: 1366px) {
        .left {
          padding-left: 38px;
          width: 530px;

          .btn {
            bottom: 30px;
          }
        }

        // .right {
        //   transform: scale(0.8);
        // }
      }

      @media screen and (max-width: 1320px) {
        .left {
          padding: 38px 0;
          padding-left: 38px;
          width: 400px;

          .btn {
            bottom: 30px;
          }
        }

        // .right {
        //   transform: scale(0.7);
        // }
      }

      @media screen and (max-width: 1200px) {

        .right {
          transform: scale(0.8);
        }
      }

      @media screen and (max-width: 1070px) {

        .right {
          transform: scale(0.6);
        }
      }

      @media screen and (max-width: 930px) {

        .right {
          transform: scale(0.4);
        }
      }
    }

    .bar_item:nth-of-type(1) {
      position: sticky;
      top: min(calc(100vh - v-bind("foldHei(4)")), v-bind("toFoldHei(0)"));
    }

    .bar_item:nth-of-type(2) {
      position: sticky;
      top: min(calc(100vh - v-bind("foldHei(3)")), v-bind("toFoldHei(1)"));
    }

    .bar_item:nth-of-type(3) {
      position: sticky;
      top: min(calc(100vh - v-bind("foldHei(2)")), v-bind("toFoldHei(2)"));
    }

    .bar_item:nth-of-type(4) {
      position: sticky;
      top: min(calc(100vh - v-bind("foldHei(1)")), v-bind("toFoldHei(3)"));
    }

    .bar_item:nth-of-type(5) {
      position: sticky;
      top: min(calc(100vh - v-bind("foldHei(0)")), v-bind("toFoldHei(4)"));
    }
  }
}
</style>